<template>
  <div class="app-container">
    <PageTools :show-before="showBefore">
      <template #before>
        共{{ total }}条记录
      </template>
      <template #after>
        <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
        <el-button size="small" type="danger" @click="exportExcel">导出</el-button>
        <el-button size="small" type="primary" @click="showDialog=true">新增员工</el-button>
      </template>
    </PageTools>
    <!-- 表格 -->
    <el-card>
      <el-table border :data="employerList">
        <el-table-column type="index" label="序号" sortable="" />
        <el-table-column prop="username" label="姓名" sortable="" />
        <el-table-column prop="workNumber" label="工号" sortable="" />
        <el-table-column prop="formOfEmployment" label="聘用形式" sortable="" :formatter="formmatFormFn" />
        <el-table-column prop="departmentName" label="部门" sortable="" />
        <el-table-column label="入职时间" sortable="">
          <!-- 接收传回来的数据，自己进行编辑，需要用插槽的方式 -->
          <template v-slot="scope">
            {{ scope.row.timeOfEntry |getNowFormatDate }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" prop="enableState" sortable="" />
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="$router.push('/employees/detail/'+scope.row.id)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="assignRole(scope.row.id)">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination layout="prev, pager, next" :total="total" :page-size="pageConfig.size" @current-change="handlerPage" /></el-row>
    </el-card>
    <AddEmployee :show-dialog="showDialog" @closeFn="showDialog=false" @reloadPage="employerListFn" />
    <AssignRole ref="assignRole" :is-show.sync="showAssign" />
  </div>
</template>

<script>
// import PageTools from '@/components/pageTools'
import AddEmployee from './components/add-employee.vue'
import { getEmployer } from '@/api/employees'
import AssignRole from './components/assign-role.vue'
import formatEmployee from '@/api/constant/employees'
// 引入导出excel功能
import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  components: { AddEmployee, AssignRole },
  data() {
    return {
      showBefore: true,
      employerList: [],
      // 总数
      total: 1,
      pageConfig: {
        size: 5,
        page: 1
      },
      showAssign: false,
      // 控制对话框是否显示
      showDialog: false
    }
  },
  // 获取角色数据
  created() {
    // 获取员工列表数据
    this.employerListFn()
  },
  methods: {
    // 封装获取员工信息列表
    async employerListFn() {
      const { rows, total } = await getEmployer(this.pageConfig)
      // 处理后端返回的数据
      this.employerList = rows.map(item => {
        return { ...item, timeOfEntry: new Date().toString(), enableState: 1 }
      })
      this.total = total
      console.log('员工列表', this.employerList)
    },
    // 页码控制
    handlerPage(val) {
      this.pageConfig.page = val
      // 重新发请求
      this.employerListFn()
    },
    // 格式化表格数据
    formmatFormFn(row, column, cellValue) {
      // 当表格的值与对象的值相同的时候返回，通过return覆盖值
      const res = formatEmployee.hireType.find(item => {
        return item.id === cellValue
      }
      )
      // res返回通过筛选的对象
      // 为什么要短路运算？因为find方法找不到会返回undefined，用undefined调用会报错
      return res ? res.value : '未知'
    },
    // 导出功能
    async exportExcel() {
      // 获取所有的员工信息
      const { rows } = await getEmployer({ page: 1, size: this.total })
      const dicts = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 处理获取到的数据
      // 导出excel  表头为header[]  表格信息data[[每一行的数据]]
      const header = Object.keys(dicts)
      // 获取对象中的每一个值，并通过数组存储起来
      const data = rows.map(user => {
        const arr = []
        for (const keys in dicts) {
          arr.push(user[dicts[keys]])
        }
        return arr
      })
      console.log(data)
      // 导出
      export_json_to_excel({
        header,
        data
      })
    },
    // 分配角色
    async assignRole(id) {
      // 回显数据
      await this.$refs.assignRole.getRoleById(id)
      this.showAssign = true
    }
  }
}
</script>

